<template>
    <div class="dataScreen-container">
        <!-- 头部区域 -->
        <div class="dataScreen_hearder">
            <img src="../../assets/images/dataScreenLogo.svg">
            <span class="vertical_line"></span>
            <span class="hearder_title">自动驾驶研发平台</span>
            <div class="current_time">{{new Date() | dataFormat('YYYY-MM-DD HH:mm:ss')}}</div>
        </div>
        <!-- 中间top区域 -->
        <div class="middle_top">
            <ul class="card_show">
                <li>
                    <span class="card_detail">总数据量（PB）</span>
                    <span class="card_num">{{numFormat(cardData.total_size)}}</span>
                </li>
                <li>
                    <span class="card_detail">采集时长（时）</span>
                    <span class="card_num">{{numFormat(cardData.duration)}}</span>
                </li>
                <li>
                    <span class="card_detail">采集里程数（KM）</span>
                    <span class="card_num">{{numFormat(cardData.mileage)}}</span>
                </li>
                <li>
                    <span class="card_detail">采集车辆（辆）</span>
                    <span class="card_num">{{numFormat(cardData.car_count)}}</span>
                </li>
                <li>
                    <span class="card_detail">当前在途（辆）</span>
                    <span class="card_num">{{numFormat(cardData.car_in_transit)}}</span>
                </li>
            </ul>
        </div>
        <!-- 中间bottom区域 -->
        <div class="middle_bottom"> 
            <div class="scroll_area">
                <ul @mouseenter="moveStop" @mouseleave="moveStart">
                    <li v-for="(item,index) in scrollData" :key="index">
                        <span class="animate-up">{{item}}</span>
                    </li>
                </ul>
            </div>
            <div class="progress_area">
                <span class="progress_initial">0</span>
                <span class="progress_content">数据密度 TB</span>
                <span class="progress_final">{{progressBarFinal}}</span>
                <span class="progress_bar"></span>
            </div>
            <div class="warn_area">
                <ul class="warn_content" v-if="exceptionTipData.length>0">
                    <li v-for="(item,index) in exceptionTipData" :key="index">
                        <div class="warn_icon">
                            <img src="../../assets/images/warn-icon.svg">
                        </div>
                        <div class="exception_tops">
                            <span class="exception_item">{{item.alarm_content}}</span>
                            <span class="exception_detail">{{item.alarm_details}}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 左侧区域 -->
        <div class="dataScreen_left">
            <!-- 脱敏数据模块 -->
            <div class="anonymize_module">
                <div class="anonymize_mask"></div>
                <div class="anonymize_header">
                    <span class="anonymize_content">待脱敏数据</span>
                    <span class="anonymize_total" v-if="dataVolumeTotal>0">{{numFormat(dataVolumeTotal)}}</span>
                    <span class="unit_style">TB</span>
                    <div class="anonymizeDropDownItem">
                        <div id="rightBtnStyle">
                            <div @click="expandAnonymizeDropDown">
                                <span>{{anonymizeDataSwitch}}</span>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </div>
                            <ul id="rightDropDownList" v-show="isExpandAnonymizeDropDown" @click="addAnonymizeColor">
                                <li @click="handleAnonymizeData('城市')">城市</li>
                                <li @click="handleAnonymizeData('图商')">图商</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="anonymize_main">
                    <!-- 脱敏数据图表 -->
                    <div class="echarts_area">
                        <div class="main_header">
                            <span class="city">{{anonymizeDataSwitch}}</span>
                            <span class="data_volume">{{'数据量' + ' ' + 'TB'}}</span>
                            <span class="duration">{{'时长' + ' ' + '时'}}</span>
                            <span class="mileage">{{'里程' + ' ' + 'KM'}}</span>
                        </div>
                        <span class="main_echarts">
                            <ul class="city_info">
                                <li v-for="item in anonymizeDetailData" :key="item.id">{{item.area || item.graph_business}}</li>
                            </ul>
                            <dataVolumeChart ref="dataVolumeChartComponent" />
                            <durationChart ref="durationChartComponent" />
                            <mileageChart ref="mileageChartComponent" />
                        </span>
                    </div>
                </div>
            </div>
            <!-- 标注数据模块 -->
            <div class="label_module">
                <div class="label_mask"></div>
                <div class="label_header">
                    <span class="label_content">标注数据</span>
                    <span class="label_total">{{numFormat(labelTotal)}}</span>
                    <span class="unit_style">张</span>
                    <div class="labelDropDownItem">
                        <div id="rightBtnStyle">
                            <div @click="expandLabelDropDown">
                                <span>{{annotateDropDownList}}</span>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </div>
                            <ul id="rightDropDownList" v-show="isExpandLabelDropDown" @click="addLabelColor">
                                <li @click="handleAnnotationData('全部')">全部</li>
                                <li @click="handleAnnotationData('本周')">本周</li>
                                <li @click="handleAnnotationData('本月')">本月</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="label_card">
                    <div class="card_left">
                        <div class="left_icon">
                            <img src="../../assets/images/label-icon1.svg" alt="">
                        </div>
                        <div class="left_content">
                            <span class="left_explain">自动标注（张）</span>
                            <span class="left_total">{{labelDetailData.automatic_tasks}}</span>
                        </div>
                    </div>
                    <div class="card_right">
                        <div class="right_icon">
                            <img src="../../assets/images/label-icon2.svg" alt="">
                        </div>
                        <div class="right_content">
                            <span class="right_explain">待自动标注（张）</span>
                            <span class="right_total">{{labelDetailData.pending_tasks}}</span>
                        </div>
                    </div>
                </div>
                <div class="label_chart">
                    <labelChart ref='annotationChartComponent'/>
                </div>
            </div>
            <!-- 训练数据模块 -->
            <div class="train_module">
                <div class="train_mask"></div>
                <div class="train_header">
                    <span class="header_content">训练数据</span>
                    <span class="header_total">{{numFormat(trainCardData.pending_tasks)}}</span>
                    <span class="unit_style">TB</span>
                </div>
                <div class="train_main">
                    <el-scrollbar style="width:28.75rem;height:11.875rem;" :native="false" :noresize="false">
                        <div class="trainCharts" :style="{width: trainData.length*210 + 20 +'px'}">
                            <div class="feel" v-for="(item,index) in trainData" :key="index">
                                <div class="feel_header">
                                    <div class="header_icon" :style="{background:trainCardColor[index % 3],
                                    borderColor:trainDataColor[index % 3]}">{{item.name}}</div>
                                    <div class="header_detail">
                                        <span class="header_content" v-if="item.trainType === 0">{{'感知融合'}}</span>
                                        <span class="header_content" v-if="item.trainType === 1">{{'前置中摄'}}</span>
                                        <span class="header_content" v-if="item.trainType === 2">{{'后置中摄'}}</span>
                                        <span class="header_version">{{item.trainVersion}}</span>
                                    </div>
                                </div>
                                <div class="feel_chart">
                                    <feelChart :trainChartData="item" :dataColor="trainDataColor[index % 3]" />
                                </div>
                                <div class="feel_progress">
                                    <span class="progress_times">当前训练任务进度</span>
                                    <el-progress 
                                    style="width: 10.625rem;" 
                                    :color="trainDataColor[index % 3]" 
                                    :percentage="item.trainProgress[item.dataLength-1]" 
                                    class="progress_bar"
                                    :show-text="false"></el-progress>
                                    <span :style="{color:trainDataColor[index % 3]}" class="progress_text">{{item.trainProgress[item.dataLength-1]}}%</span>
                                </div> 
                            </div>
                        </div>
                    </el-scrollbar>
                </div>

                <div class="train_bottom">
                    <div class="bottom_left">
                        <div class="card_left">
                            <img src="../../assets/images/train-icon1.svg" alt="">
                        </div>
                        <div class="card_right">
                            <span class="right_content">待训练任务</span>
                            <span class="right_total">{{trainCardData.pending_tasks}}</span>
                        </div>
                    </div>
                    <div class="bottom_right">
                            <div class="card_left">
                                <img src="../../assets/images/train-icon2.svg" alt="">
                            </div>
                            <div class="card_right">
                                <span class="right_content">GPU消耗数</span>
                                <span class="right_total">{{trainCardData.gpu_consumes}}</span>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        <!-- 右侧区域 -->
        <div class="dataScreen_right">
            <!-- 场景数据模块 -->
            <div class="scene_nodule">
                <div class="scene_mask"></div>
                <div class="scene_header">
                    <span class="scene_content">场景数据</span>
                    <span class="scene_total" v-if="sceneTotal>0">{{numFormat(sceneTotal)}}</span>
                    <span class="unit_style">TB</span>
                    <i class="el-icon-close" @click="sceneCallback()"></i>
                    <div class="sceneDropDownItem">                      
                        <div id="rightBtnStyle">
                            <div @click="expandSceneDropDown">
                                <span>{{sceneDropDownIList}}</span>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </div>
                            <ul id="rightDropDownList" v-show="isExpandSceneDropDown" @click="addSceneColor">
                                <li @click="handleSceneData('全部')">全部</li>
                                <li @click="handleSceneData('本周')">本周</li>
                                <li @click="handleSceneData('本月')">本月</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="scene_chart">
                    <div class="pie_chart">
                        <div class="chart_left">
                            <pieChart/>
                        </div>
                        <div class="right_icon">
                            <ul class="icon_detal">
                                <li>
                                    <i class="city"></i>
                                    <span style="letter-spacing:0.625rem;">城市</span>
                                </li>
                                <li>
                                    <i class="speed"></i>
                                    <span style="letter-spacing:0.625rem;">高速</span>
                                </li>
                                <li>
                                    <i class="park"></i>
                                    <span>停车场</span>
                                </li>
                                <li>
                                    <i class="car"></i>
                                    <span>follow_car</span>
                                </li>
                            </ul>
                        </div>
                        <div class="right_num">
                            <ul class="num_detail">
                                <li v-if="cityTotal>0">{{numFormat(cityTotal)}}</li>
                                <li v-if="speedTotal>0">{{numFormat(speedTotal)}}</li>
                                <li v-if="parkTotal>0">{{numFormat(parkTotal)}}</li>
                                <li v-if="carTotal>0">{{numFormat(carTotal)}}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="bar_chart">
                        <barChart ref="sceneBarChartComponent"/>
                    </div>
                    <div class="chart_detail">
                        <span class="scene">场景</span>
                        <span class="dataVolume">数据量TB</span>
                    </div>
                </div>
            </div>
            <!-- 仿真数据模块 -->
            <div class="simulation_module">
                <div class="simulation_mask"></div>
                <div class="simulation_header">
                    <span class="simulation_content">仿真数据</span>
                    <span class="simulation_total">{{numFormat(simulationDetailData.pending_tasks)}}</span>
                    <span class="unit_style">个</span>
                    <div class="simulationDropDownItem">
                        <div id="rightBtnStyle">
                            <div @click="expandSimulationDropDown">
                                <span>{{simulationDropDownIList}}</span>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </div>
                            <ul id="rightDropDownList" v-show="isExpandSimulationDropDown" @click="addSimulationColor">
                                <li @click="handleSimulationData('全部')">全部</li>
                                <li @click="handleSimulationData('本周')">本周</li>
                                <li @click="handleSimulationData('本月')">本月</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="simulation_main">
                    <el-scrollbar style="height:100%;">
                        <ul class="simulation_card">
                            <li class="pending_task" v-for="(item,index) in simulationChartData" :key="index">
                                <i>{{item.subcategory_number}}</i>
                                <span>{{item.segmentation_scene}}</span>
                            </li>
                        </ul>
                    </el-scrollbar>
                </div>
                <div class="simulation_bottom">
                    <div class="bottom_up">
                        <div class="up_left">
                            <div class="left_icon">
                                <img src="../../assets/images/emulation-icon1.svg" alt="">
                            </div>
                            <div class="left_detail">
                                <span class="left_content">测试任务数</span>
                                <span class="left_total">{{numFormat(simulationDetailData.test_tasks)}}</span>
                            </div>
                        </div>
                        <div class="up_right">
                            <div class="right_icon">
                                <img src="../../assets/images/emulation-icon2.svg" alt="">
                            </div>
                            <div class="right_detail">
                                <span class="right_content">任务成功率</span>
                                <span class="right_total">{{simulationDetailData.success_rate }}</span>
                                <span class="unit">%</span>
                            </div>
                        </div>
                    </div>
                    <div class="bottom_down">
                        <div class="down_left">
                            <div class="left_icon">
                                <img src="../../assets/images/emulation-icon3.svg" alt="">
                            </div>
                            <div class="left_detail">
                                <span class="left_content">本周测试里程</span>
                                <span class="left_total">{{simulationDetailData.week_test_mileage }}</span>
                                <span class="unit">KM</span>
                            </div>
                        </div>
                        <div class="down_right">
                            <div class="right_icon">
                                <img src="../../assets/images/emulation-icon4.svg" alt="">
                            </div>
                            <div class="right_detail">
                                <span class="right_content">全部测试里程</span>
                                <span class="right_total">{{simulationDetailData.all_test_mileage }}</span>
                                <span class="unit">KM</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 地图 -->
        <div>
           <video loop autoplay muted class="videoBackground">
             <source src="../../assets/video/bgvideo.mp4" type="video/mp4"/>
           </video>
        </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { geoCoordMap, mapOption } from '../../utils/js/point'
import '../../utils/js/china'
import { importAnonymizeData, importAnonymizeGraphData, importScenePieData, importTrainData, importSimulationChatData, importSimulationQueryData } from '../homePage/components/listPage/dataAccess/api/echartsChatApi'; 
import dataVolumeChart from './chartsData/anonymizationChart/dataVolumeChart.vue'
import durationChart from './chartsData/anonymizationChart/durationChart.vue'
import mileageChart from './chartsData/anonymizationChart/mileageChart.vue'
import labelChart from './chartsData/labelChart.vue'
import feelChart from './chartsData/trainChart/feelChart.vue'
import frontEndChart from './chartsData/trainChart/frontEndChart.vue'
import pieChart from './chartsData/sceneChart/pieChart.vue'
import barChart from './chartsData/sceneChart/barChart.vue'
export default {
    components: {
        dataVolumeChart,
        durationChart,
        mileageChart,
        labelChart,
        feelChart,
        frontEndChart,
        pieChart,
        barChart,
    },
    data() {
        return { 
            animateUp: false,
            timer: null,
            anonymizeDetailData: [],
            progressBarFinal: '',
            labelDetailData: {},
            trainCardData: {},
            trainFeelData: [],
            trainFrontendData: [],
            trainPostfixData: [],
            dataVolumeTotal: 0,
            labelTotal: 0,
            cardData: {},
            scrollData: [],
            mapData: [],
            exceptionTipData: [],
            scenePieData: [],
            cityTotal: 0,
            speedTotal: 0,
            parkTotal: 0,
            carTotal:0,
            sceneTotal: 0,
            simulationDetailData: {},
            simulationChartData: [],
            isExpandAnonymizeDropDown: false,
            isExpandLabelDropDown: false,
            isExpandTrainDropDown: false,
            isExpandSceneDropDown: false,
            isExpandSimulationDropDown: false,
            anonymizeDataSwitch: '城市',
            anonymizeDropDownItem: '城市',
            annotateDropDownList: '全部',
            sceneDropDownIList: '全部',
            simulationDropDownIList: '全部',
            trainDataName: [],
            trainData: [],
            trainDataColor:['rgba(14,76,255,1)','rgba(7,171,104,1)','rgba(161,161,161,1)'],
            trainCardColor: ['linear-gradient(90deg,rgba(14,76,255,0.40), rgba(14,76,255,0.20))', 'linear-gradient(90deg,rgba(7,171,104,0.40), rgba(7,171,104,0.20))', 'linear-gradient(90deg,rgba(161,161,161,0.40), rgba(161,161,161,0.20))']
        }
    },
    created() {
        this.getAnonymizeDetailData();
        this.getLabelData();
        this.getTrainCardData();
        this.getTrainHeaderData();
        this.getCardData();
        this.getExceptionTipData();
        this.getScenePieData();
        this.getSimulationData();
        this.getSimulationChartData();
        this.getTrainDetailData();
    },
    mounted() {
        this.getScrollData();
        this.timer = setInterval(this.scrollAnimate, 1500)
    },
    methods: {
        //返回首页
        sceneCallback(){
           this.$router.go(-1);
        },
        // 获取训练echarts信息
        async getTrainDetailData() {
            const res = await importTrainData();
            res.data.data.forEach(item=>{
                if (this.trainDataName.indexOf(item.name) == -1) {
                    this.trainDataName.push(item.name);
                    this.trainData.push({
                        name: item.name,
                        trainType: item.train_type,
                        trainVersion: item.train_version,
                        trainTimes: [item.train_times],
                        trainPrecision: [item.train_precision],
                        trainProgress: [item.train_progress],
                    });
                } else {
                    let index = this.trainDataName.indexOf(item.name);
                    this.trainData[index].trainTimes.push(item.train_times);
                    this.trainData[index].trainPrecision.push(item.train_precision);
                    this.trainData[index].trainProgress.push(item.train_progress);
                }
            })
            this.trainData.forEach(item=>{
                item.trainTimes.reverse();
                item.trainPrecision.reverse();
                item.trainProgress.reverse();
                item.dataLength = item.trainTimes.length;
            })
        },
        // 点击展开下拉菜单
        expandAnonymizeDropDown() {
            this.isExpandAnonymizeDropDown = !this.isExpandAnonymizeDropDown;
        },
        addAnonymizeColor(e) {
            e.target.style.backgroundColor = 'rgba(255,255,255,0.10)';
            if (e.target.previousElementSibling) {
                e.target.previousElementSibling.style.backgroundColor = 'rgba(0,0,0,0.60)';
            } else if (e.target.nextElementSibling) {
                e.target.nextElementSibling.style.backgroundColor = 'rgba(0,0,0,0.60)';
            }
        },
        expandLabelDropDown() {
            this.isExpandLabelDropDown = !this.isExpandLabelDropDown
        },
        addLabelColor(e) {
            e.target.style.backgroundColor = 'rgba(255,255,255,0.10)';
            if (e.target.previousElementSibling) {
                e.target.previousElementSibling.style.backgroundColor = 'rgba(0,0,0,0.60)';
            } else if (e.target.nextElementSibling) {
                e.target.nextElementSibling.style.backgroundColor = 'rgba(0,0,0,0.60)';
            }
        },
        expandTrainDropDown() {
            this.isExpandTrainDropDown = !this.isExpandTrainDropDown
        },
        addTrainColor(e) {
            e.target.style.backgroundColor = 'rgba(255,255,255,0.10)';
            if (e.target.previousElementSibling) {
                e.target.previousElementSibling.style.backgroundColor = 'rgba(0,0,0,0.60)';
            } else if (e.target.nextElementSibling) {
                e.target.nextElementSibling.style.backgroundColor = 'rgba(0,0,0,0.60)';
            }
        },
        expandSceneDropDown() {
            this.isExpandSceneDropDown = !this.isExpandSceneDropDown
        },
        addSceneColor(e) {
            e.target.style.backgroundColor = 'rgba(255,255,255,0.10)';
            if (e.target.previousElementSibling) {
                e.target.previousElementSibling.style.backgroundColor = 'rgba(0,0,0,0.60)';
            } else if (e.target.nextElementSibling) {
                e.target.nextElementSibling.style.backgroundColor = 'rgba(0,0,0,0.60)';
            }
        },
        expandSimulationDropDown() {
            this.isExpandSimulationDropDown = !this.isExpandSimulationDropDown
        },
        addSimulationColor(e) {
            e.target.style.backgroundColor = 'rgba(255,255,255,0.10)';
            if (e.target.previousElementSibling) {
                e.target.previousElementSibling.style.backgroundColor = 'rgba(0,0,0,0.60)';
            } else if (e.target.nextElementSibling) {
                e.target.nextElementSibling.style.backgroundColor = 'rgba(0,0,0,0.60)';
            }
        },
        // 获取滚动数据
        getScrollData() {
            this.$url.get('monitor/news')
            .then(res => {
                this.getMapChart()
                if (res.status === 200 && res.data?.data) {
                    this.mapData = res.data;                  
                }
            })
            .catch(err=>{
                
            })
        },
        // 地图初始化
         getMapChart() {
            var data = [] // 地图上显示出来的城市
            this.anonymizeDetailData.forEach(itm => {
            this.$url.get('trace/event').then(res => {
                let newsData = res.data.data.data_list
                if(newsData){
                    newsData.forEach(item=>{
                    this.scrollData.push(item.username+item.event_type+item.create_time)
                    })
                }
            })
            this.$url.get('monitor/news').then(res => {
                if (res.status === 200 && res.data?.data) {
                    this.mapData = res.data?.data;
                    if(this.mapData){        
                    this.mapData.forEach(item => {
                    if (item.area && itm.area === item.area) {
                        var size = itm.size
                        var blueValue = parseInt(this.progressBarFinal*0.17) 
                        var greenValue = parseInt(this.progressBarFinal*0.53) 
                        var yellowValue = parseInt(this.progressBarFinal*0.87) 
                        data.push({
                            name: item.area,value: 100, // value 设置未选中时圆点的大小
                            info: item.info_content, size: size,blueValue: blueValue,greenValue: greenValue,yellowValue: yellowValue 
                        })
                    } 
            })
                    }
                }
            })        
            })     
            var chartDom = document.getElementById('map');
            var myChart = echarts.init(chartDom);
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({ // 设置放在params中data里面的内容
                            name: data[i].name,value: geoCoord.concat(data[i].value),info: data[i].info,size: data[i].size,  
                            blueValue: data[i].blueValue,  greenValue: data[i].greenValue,  yellowValue: data[i].yellowValue  
                        })
                    } 
                }
                return res;
            };
            mapOption.series[0].data = convertData(data);
            mapOption.series[0].name = '今日待脱敏数据';
            myChart.setOption(mapOption)
        },
        // 点击待脱敏数据下拉菜单城市/图商
        handleAnonymizeData(params) {
            this.anonymizeDataSwitch = params;
            this.anonymizeDropDownItem = params;
            this.getAnonymizeDetailData();
            this.$refs.dataVolumeChartComponent.chartRender(params)
            this.$refs.durationChartComponent.chartRender(params)
            this.$refs.mileageChartComponent.chartRender(params)
        },
        // 获取待脱敏数据
        async getAnonymizeDetailData() {
            if (this.anonymizeDataSwitch === '城市') {
                const res = await importAnonymizeData()
                this.anonymizeDetailData = res.data.data;
                this.dataVolumeTotal = 0;
                var dataVolume = this.anonymizeDetailData.map(item => {return item.size})
                this.progressBarFinal = Math.max(...dataVolume)
                dataVolume.forEach(item => {
                    this.dataVolumeTotal += item
                })
            } else if (this.anonymizeDataSwitch === '图商') {
                const res = await importAnonymizeGraphData()
                this.anonymizeDetailData = res.data.data;
                this.dataVolumeTotal = 0;
                var dataVolume = this.anonymizeDetailData.map(item => {return item.size})
                this.progressBarFinal = Math.max(...dataVolume)
                dataVolume.forEach(item => {
                    this.dataVolumeTotal += item
                })
            }
        },
        // 获取标注数据
        getLabelData() {
            this.$url.get('monitor/annotate')
            .then(res => {
                if (res.status === 200 && res.data?.data) {
                    this.labelDetailData = res.data?.data;
                    this.labelTotal = this.labelDetailData.automatic_tasks + this.labelDetailData.pending_tasks;
                }
            })
            .catch(err=>{
                
            })
        },
        // 点击标注数据下拉菜单中的时间
        handleAnnotationData(params) {
            this.annotateDropDownList = params
            this.$refs.annotationChartComponent.chartRender(params) 
        },
        // 获取训练卡片数据
        getTrainCardData() {
            this.$url.get('monitor/train')
            .then(res => {
                if (res.status === 200 && res.data?.data) {
                    this.trainCardData = res.data?.data;
                }
            })
            .catch(err=>{
                
            })
        },
        // 获取训练echarts头部信息
        async getTrainHeaderData() {
            const res = await importTrainData()
            this.trainFeelData = res.data.data.filter(item => {
                return item.name === 'V8'
            })
            this.trainFrontendData = res.data.data.filter(item => {
                return item.name === 'V456'
            })
            this.trainPostfixData = res.data.data.filter(item => {
                return item.name === 'V789'
            })
        },
        // 获取卡片数据
        getCardData() {
            this.$url.get('monitor/summarize')
            .then(res => {
                if (res.status === 200 && res.data?.data) {
                    this.cardData = res.data?.data;
                }
            })
            .catch(err=>{
                
            })
        // 刷新页面数据
            .finally(()=>{
                this.timer=setTimeout(this.getCardData, 5000)
            })
        },
        // 无缝滚动事件
        scrollAnimate() {
            this.animateUp = true
            setTimeout(() => { 
                this.scrollData.push(this.scrollData[0])
                this.scrollData.shift()
                this.animateUp = false
            }, 1000)
        },
        // 鼠标经过停止
        moveStop() {
            clearInterval(this.timer);
        },
        // 鼠标离开开始
        moveStart() {
            this.timer = setInterval(this.scrollAnimate, 1500)
        },
        // 获取异常提示数据
        getExceptionTipData() {
            this.$url.get('monitor/alarm')
            .then(res => {
                if (res.status === 200 && res.data?.data) {
                   this.exceptionTipData = res.data?.data;
                }
            })
            .catch(err=>{
                
            })
        },

        // 获取场景数据饼图数据
        async getScenePieData() {
            const res = await importScenePieData()
            this.scenePieData = res.data.data;
            this.scenePieData.forEach(item => {
                if (item.main_scene === '城市') {
                    this.cityTotal = item.total_size
                } else if (item.main_scene === '高速') {
                    this.speedTotal = item.total_size
                } else if (item.main_scene === '停车场') {
                    this.parkTotal = item.total_size
                }else if (item.main_scene === 'follow_car') {
                    this.carTotal = item.total_size
                }
            })
            this.sceneTotal = this.cityTotal + this.speedTotal + this.parkTotal +this.carTotal;
        },
        // 点击场景数据下拉菜单中的时间
        handleSceneData(params) {
            this.sceneDropDownIList = params
            this.$refs.sceneBarChartComponent.chartRender(params)
        },
        // 获取仿真卡片数据
        getSimulationData() {
            this.$url.get('monitor/emulation')
            .then(res => {
                if (res.status === 200) {
                    this.simulationDetailData = res.data.data;
                }
            })
            .catch(err=>{
                
            })
        },
        // 点击仿真数据下拉菜单
        async handleSimulationData(params) {
            this.simulationDropDownIList = params
            if (params == '全部') {
                this.getSimulationChartData();
            } else {
                const res = await importSimulationQueryData(params)
                if (res.status === 200) {
                    this.simulationChartData = res.data.data;
                }
            }
        },       
        // 获取仿真图表数据
        async getSimulationChartData() {
            const res = await importSimulationChatData()
            this.simulationChartData = res.data.data;
        },
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
}
</script>

<style lang="less" >
.dataScreen-container {
    width: 1920px;
    height: 1080px;
    position: relative;
   .videoBackground {
      width: 1920px;
      height: 1080px;
      object-fit: fill;
      overflow-y: hidden;
      vertical-align: middle;     
    }
    // 头部样式
    .dataScreen_hearder {
        width: 780px;
        position: absolute;
        left: 610px;
        top: 42px;
        z-index: 1;
        display: flex;
        img{
            width: 160px;
        }
        .vertical_line {
            display: inline-block;
            width: 1px;
            height: 24px;
            background: #ffffff;
            margin: 16px 20px 0px;
        }
        .hearder_title {
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: Bold;
            font-size: 36px;
            color: #ffffff;
        }
        .current_time {
            position: absolute;
            top: 20px;
            left: 602px;
            font-size: 18px;
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: Normal;
            color: #fff;
        }
    }
    // 主体卡片样式
    .middle_top {
        position: absolute;
        left: 580px;
        top: 130px;
        z-index: 1;
        width: 843px;
        height: auto;
        .card_show {
            list-style: none;
            color: #fff;
            display: flex;
            li {
                width: 105px;
                margin-right: 70px;
                .card_detail {
                    display: block;
                    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                    font-weight: Normal;
                    font-size: 12px;
                    color: #ffffff;
                    margin-bottom: 18px;
                }
                .card_num {
                    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                    font-weight: Bold;
                    font-size: 30px;
                    color: #ffffff;
                }
            }
            li:last-child {
                margin-right: 0px;
            }
        }
    }
    // 中间底部区域
    .middle_bottom {
        position: absolute;
        bottom: 40px;
        left: 580px;
        height: auto;
        display: flex;
        align-items:flex-end;
        z-index: 1;
        .scroll_area {
            position: relative;
            width: 260px;
            height: 210px;
            font-size: 12px;
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: Normal;
            color: #ffffff;
            overflow: hidden;
            ul {
                width: 260px;
                height: auto;
                list-style: none;
                padding: 0;
                margin: 0;
                li {
                    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                    font-weight: Normal;
                    font-size: 12px;
                    color: #ffffff;
                    padding-top: 20px;
                    .animate-up {
                        transition: all 0.5s ease-in-out;
                        transform: translateY(-40px);
                    }
                    &:hover {
                        color: #417deb;
                    }
                }
                li:first-child {
                    color: rgba(255,255,255, 0.1);
                    margin-top: 0px;
                }
                li:nth-child(2) {
                    color: rgba(255,255,255, 0.4);
                }
                li:nth-child(3) {
                    color: rgba(255,255,255, 0.7);
                }
                li:last-child {
                    color: rgba(255,255,255, 1);
                }
            }
        }
        .progress_area {  
            margin-left: 20px;
            margin-right: 50px;
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: Normal;
            font-size: 10px;
            color: #ffffff;
            .progress_initial {
                margin-right: 60px;
            }
            .progress_final {
                margin-left: 30px;
            }
            .progress_bar {
                display: block;
                width: 200px;
                height: 8px;
                margin-top: 10px;
                background: linear-gradient(90deg,#0e4cff, #0e4cff 17%, #07ab68 53%, #ffc617 87%, #ffc617);
            }
            .el-progress__text {
                font-size: 10px !important;
                color: #fff;
                margin-top: -32px;
                margin-left: -25px;
            }
            .el-progress-bar__inner {
                background: linear-gradient(90deg,#0e4cff, #0e4cff 17%, #07ab68 53%, #ffc617 87%, #ffc617) !important;
            }
        }
        .warn_area {
            @keyframes mymove{
                0% {opacity: 0}
                30% {opacity: 0;}
                50% {opacity: 0;}
                100% {opacity: 1;}
            }
            .warn_content {
                list-style: none;
                padding: 0;
                margin: 0;
                li {
                    animation-name: mymove;
                    animation-duration: 12s;
                    animation-iteration-count: infinite;
                    width: 320px;
                    height: 65px;
                    border: 1px solid;
                    border-image: linear-gradient(90deg,#ff0000, rgba(255,255,255,0.30) 60%,  rgba(255,255,255,0.00)) 1;
                    background: linear-gradient(90deg,#5e2323, rgba(237,13,13,0.40) 60%,rgba(255,255,255,0.00));
                    margin-top: 10px;
                    border-radius: 2px;
                    padding-top: 16px;
                    padding-left: 10px;
                    border-right: none;
                    box-sizing: border-box;
                    color: #fff;
                    display: flex;
                    .warn_icon {
                        width: 30px;
                        height: 30px;
                        margin-right: 10px;
                        img {
                            width: 100%;
                        }
                    }
                    .exception_tops {
                        color: #fff;
                        width: 260px;
                        .exception_item {
                            display: block;
                            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                            font-weight: Normal;
                            font-size: 14px;
                        }
                        .exception_detail {
                            display: block;
                            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                            font-weight: Normal;
                            font-size: 12px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }
    }
    // 单位公共样式
    .unit_style {
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        font-size: 12px;
        color: #ffffff;
        margin-left: 5px;
    }
    // 返回上一级
    .el-icon-close{
       color:  #ffffff;
       font-size: 24px;
       position: relative;
       left: 150px;
       top: -30px;
    }
    // 右侧公共按钮样式
    #rightBtnStyle {
        width: 60px;
        height: 24px;
        line-height: 22px;
        background: rgba(0,0,0,0.60);
        border: 1px solid rgba(255,255,255,0.30);
        border-radius: 2px;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        text-align: center;
        font-size: 12px;
        color: #fff;
        box-sizing: border-box;
        .el-icon-arrow-down:before {
            content: '';
        }
        #rightDropDownList {
            width: 60px;
            border: 1px solid rgba(255,255,255,0.30);
            border-top: none;
            background: rgba(0,0,0,0.60);
            list-style: none;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            margin-left: -1px;
            li {
                padding-right: 20px;
            }
        }
    }
    // 左侧样式
    .dataScreen_left {
        position: absolute;
        top: 0px;
        padding-left:40px;
        width: 460px;
        height: auto;
        border-right: 1px solid;
        border-image: linear-gradient(180deg,rgba(255,255,255,0.00), rgba(255,255,255,0.20) 38%, rgba(255,255,255,0.20) 64%, rgba(255,255,255,0.00)) 1;
        z-index: 1;
        backdrop-filter: blur(5px);
        // 脱敏数据样式
        .anonymize_module {
            height: 370px;
            padding-top: 60px;
            box-sizing: border-box;
            .anonymize_header {
                color: #fff;
                height: 20px;
                .anonymize_content {
                    display: inline-block;
                    font-size: 18px;
                    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                    font-weight: Bold;
                    margin-right: 7px;
                }
                .anonymize_total {
                    font-size: 12px;
                    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                    font-weight: Normal;
                    color: #ffffff;
                }
                .anonymizeDropDownItem {
                    position: absolute;
                    top: 58px;
                    right: 50px;
                    display: none;
                }
            }
            .anonymize_main {
                color: #fff;
                margin-top: 32px;
                    .main_header {
                        opacity: 0.6;
                        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                        font-weight: Normal;
                        font-size: 12px;
                        .city {
                            margin-right: 61px;
                        }
                        .duration {
                            margin: 0 90px;
                        }
                    }
                    .main_echarts {
                        display: flex;
                        margin-top: 20px;
                        .city_info {
                            width: 40px;
                            list-style: none;
                            padding: 0;
                            margin: 0;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-around;
                            li {
                                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                                font-weight: Normal;
                                font-size: 14px;
                                color: #fff;
                            }
                        }
                    }
            }
        }
        .anonymize_module:hover {
            .anonymize_mask {
                width: 500px;
                height: 360px;
                position: absolute;
                top: 0px;
                left: 0px;
                background: linear-gradient(90deg,rgba(40,43,52,0), rgba(40,43,52,0.50));
                z-index: -1;
            }
            .anonymizeDropDownItem {
                position: absolute;
                top: 58px;
                right: 50px;
                display: block;
            }
        }
        // 标注数据样式
        .label_module {
            height: 350px;
            padding-top: 10px;
            padding-bottom: 46px;
            box-sizing: border-box;
            .label_header {
                .label_content {
                    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                    font-weight: Bold;
                    font-size: 18px;
                    color: #ffffff;
                    margin-right: 10px;
                }
                .label_total {
                    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                    font-weight: Normal;
                    font-size: 12px;
                    color: #ffffff;
                }
                .labelDropDownItem {
                    position: absolute;
                    right: 50px;
                    top: 375px;
                    display: none;
                }
            }
            .label_card {
                display: flex;
                margin-top: 26px;
                .card_left {
                    margin-right: 60px;
                    display: flex;
                    .left_icon {
                        width: 70px;
                        height: 70px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .left_content {
                        color: #ffffff;
                        .left_explain {
                            display: block;
                            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                            font-weight: Normal;
                            font-size: 12px;
                            opacity: 0.6;
                        }
                        .left_total {
                            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                            font-weight: Bold;
                            font-size: 18px;
                        }
                    }
                }
                .card_right {
                    display: flex;
                    .right_icon {
                        width: 70px;
                        height: 70px;
                        line-height: 50px;
                        text-align: center;
                        img {
                            width: 100%;
                        }
                    }
                    .right_content {
                        color: #ffffff;
                        .right_explain {
                            display: block;
                            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                            font-weight: Normal;
                            font-size: 12px;
                            opacity: 0.6;
                        }
                        .right_total {
                            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                            font-weight: Bold;
                            font-size: 18px;
                        }
                    }
                }
            }
            .label_chart {
                margin-top: 5px;
                .chart_header {
                    display: flex;
                    .header_left {
                        margin-left: 70px;
                        .picture_point {
                            display: inline-block;
                            width: 12px;
                            height: 12px;
                            background: #0E4CFF;
                            margin-right: 8px;
                        }
                        .picture_text {
                            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                            font-weight: Normal;
                            opacity: 0.6;
                            font-size: 12px;
                            color: #ffffff;
                        }
                    }
                    .header_right {
                        margin-left: 70px;
                        .cloud_point {
                            display: inline-block;
                            width: 12px;
                            height: 12px;
                            background: #07AB68;
                            margin-right: 8px;
                        }
                        .cloud_text {
                            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                            font-weight: Normal;
                            opacity: 0.6;
                            font-size: 12px;
                            color: #ffffff;
                        }
                    }
                }
            }
        }
        .label_module:hover {
            .label_mask {
                width: 500px;
                height: 340px;
                position: absolute;
                top: 360px;
                left: 0px;
                background: linear-gradient(90deg,rgba(40,43,52,0), rgba(40,43,52,0.50));
                z-index: -1;
            }
            .labelDropDownItem {
                position: absolute;
                right: 50px;
                top: 375px;
                display: block;
            }
        }
        // 训练模块样式
        .train_module {
            height: 360px;
            padding-top: 5px;
            box-sizing: border-box;
            .train_header {
                color: #fff;
                .header_content {
                    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                    font-weight: Bold;
                    font-size: 18px;
                    margin-right: 10px;
                }
                .header_total {
                    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                    font-weight: Normal;
                    font-size: 12px;
                }
            }
            .train_main {
                margin-top: 32px;
                display: flex;
                .el-scrollbar__wrap {
                    overflow: hidden;
                    height: calc(100% + 20px); 
                }
                .el-scrollbar__bar{
                    left: 0 !important;
                    right: 0 !important;  
                    .el-scrollbar__thumb{
                      border-radius: 2px !important;
                    }
                }
                .trainCharts {
                    display: flex;
                    justify-content: space-between;
                    padding-right: 20px;
                }
                .feel {
                    box-sizing: border-box;
                    .feel_header {
                        display: flex;
                        align-items: center;
                        .header_icon {
                            position: relative;
                            width: 40px;
                            height: 40px;
                            line-height: 40px;
                            border: 1px solid #0e4cff;
                            border-radius: 3px;
                            font-size: 12px;
                            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                            font-weight: Normal;
                            text-align: CENTER;
                            color: #ffffff;
                            box-sizing: border-box;
                            transform: scale(0.8);
                            transform-origin: left;
                        }
                        .header_detail {
                            color: #fff;
                            margin-left: 10px;
                            .header_content {
                                display: block;
                                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                                font-weight: Normal;
                                font-size: 14px;
                            }
                            .header_version {
                                opacity: 0.6;
                                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                                font-weight: Normal;
                                font-size: 12px;
                            }
                        }
                    }
                    .feel_progress {
                        position: relative;
                        margin-top: 10px;
                        .progress_times {
                            margin-left: -10px;
                            display: inline-block;
                            opacity: 0.6;
                            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                            font-weight: Normal;
                            color: #ffffff;
                            font-size: 10px;
                            transform: scale(0.8);
                        }
                        .el-progress-bar {
                            padding-right: 0;
                        }
                        .el-progress__text { // 进度条百分比数值
                            margin-top: -66px;
                            margin-left: 146px;
                            color: #0E4CFF;
                            font-size: 10px;
                            transform: scale(0.75);
                        }
                        .progress_text {
                            position: absolute;
                            right: 27px;
                            top: 0;
                            font-size: 10px;
                            transform: scale(0.8);
                        }
                        .el-progress-bar__outer {
                            height: 4px !important;
                            border-radius: 2px;
                            background-color: rgba(255,255,255,0.1);
                        }
                        .el-progress-bar__inner {
                            border-radius: 1px;
                        }
                    }
                }
            }
            .train_bottom {
                display: flex;
                margin-top: 20px;
                .bottom_left {
                    display: flex;
                    .card_left {
                        width: 70px;
                        height: 70px;
                        img {
                            width: 100%;
                        }
                    }
                    .card_right {
                        margin-left: 0px;
                        .right_content {
                            display: block;
                            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                            font-weight: Normal;
                            font-size: 12px;
                            color: #ffffff;
                            opacity: 0.6;
                            margin-bottom: 8px;
                        }
                        .right_total {
                            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                            font-weight: Bold;
                            font-size: 18px;
                            color: #ffffff;
                        }
                    }
                }
                .bottom_right {
                    display: flex;
                    margin-left: 105px;
                    .card_left {
                        width: 70px;
                        height: 70px;
                        img {
                            width: 100%;
                        }
                    }
                    .card_right {
                        margin-left: 0px;
                        .right_content {
                            display: block;
                            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                            font-weight: Normal;
                            font-size: 12px;
                            color: #ffffff;
                            opacity: 0.6;
                            margin-bottom: 8px;
                        }
                        .right_total {
                            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                            font-weight: Bold;
                            font-size: 18px;
                            color: #ffffff;
                        }
                    }
                }
            }
        }
        .train_module:hover {
        .train_mask{
            display: block;
            width: 500px;
            height: 380px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            background: linear-gradient(90deg,rgba(40,43,52,0), rgba(40,43,52,0.50));
            z-index: -1;
            }
        } 
        }
    // 右侧样式
    .dataScreen_right {
        position: absolute;
        right: 0;
        top: 0;
        width: 480px;
        height: auto;
        padding: 60px 60px 40px 50px;
        border-left: 1px solid;
        border-image: linear-gradient(180deg,rgba(255,255,255,0.00), rgba(255,255,255,0.20) 38%, rgba(255,255,255,0.20) 64%, rgba(255,255,255,0.00)) 1;
        box-sizing: border-box;
        z-index: 1;
        backdrop-filter: blur(5px);
        // 场景数据样式
        .scene_nodule {
            height: 560px;
            .scene_header {
                margin-bottom: 40px;
                .scene_content {
                    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                    font-weight: Bold;
                    font-size: 18px;
                    color: #ffffff;
                    margin-right: 10px;
                }
                .scene_total {
                    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                    font-weight: Normal;
                    font-size: 12px;
                    color: #ffffff;
                }
                .sceneDropDownItem {
                    position: absolute;
                    right: 50px;
                    top: 60px;
                    display: none;
                }
            }
            .scene_chart {
                .pie_chart {
                    display: flex;
                    .chart_left{
                      padding-top: 16px;
                    }
                    .right_icon {
                        margin-left: 40px;
                        margin-top: 8px;
                        .icon_detal {
                            list-style: none;
                            padding: 0;
                            margin: 0;
                            li {
                                margin-bottom: 18px;
                                .city {
                                    background: #0E4CFF;
                                }
                                i {
                                    display: inline-block;
                                    width: 12px;
                                    height: 12px;
                                    background: #FFC617;
                                    margin-right: 8px;
                                }
                                .speed {
                                    background: #07AB68;
                                }
                                .car{
                                    background: #ef6567;
                                }
                                span {
                                    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                                    font-weight: Normal;
                                    font-size: 12px;
                                    color: #ffffff;
                                }
                            }

                        }
                    }
                    .right_num {
                        margin-left: 20px;
                        margin-top: 10px;
                        .num_detail {
                            list-style: none;
                            padding: 0;
                            margin: 0;
                            li {
                                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                                font-weight: Normal;
                                font-size: 12px;
                                color: #ffffff;
                                margin-bottom: 20px;
                            }
                        }
                    }
                }
                .chart_detail {
                    display: flex;
                    justify-content: space-between;
                    opacity: 0.6;
                    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                    font-weight: Normal;
                    font-size: 10px;
                    transform: scale(0.9);
                    padding-top: 6px;
                    color: #ffffff;
                }
            }
        }
        .scene_nodule:hover {
            .scene_mask {
                width: 480px;
                height: 670px;
                position: absolute;
                top: 0px;
                right: 0px;
                background: linear-gradient(90deg, rgba(40,43,52,0.50), rgba(40,43,52,0));
                z-index: -1;
            }
            .sceneDropDownItem {
                position: absolute;
                right: 50px;
                top: 60px;
                display: block;
            }
        }
        // 仿真数据样式
        .simulation_module {
            height: 360px;
            padding-top: 100px;
            box-sizing: border-box;
            .simulation_header {
                margin-bottom: 40px;
                .simulation_content {
                    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                    font-weight: Bold;
                    font-size: 18px;
                    color: #ffffff;
                    margin-right: 10px;
                }
                .simulation_total {
                    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                    font-weight: Normal;
                    font-size: 12px;
                    color: #ffffff;
                }
                .simulationDropDownItem {
                    position: absolute;
                    right: 50px;
                    bottom: 275px;
                    display: none;
                }
            }
            .simulation_main {
                margin-bottom: 40px;
                .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{      
                    white-space: nowrap;
                }
                .is-vertical {
                    display: none;
                }
                .simulation_card {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    li {
                        display: inline-block;
                        width: 70px;
                        height: 55px;
                        line-height: 20px;
                        padding-top: 13px;
                        text-align: center;
                        border: 1px solid;
                        border-image: linear-gradient(180deg,#2e3847, rgba(116,111,111,0.20) 60%,  rgba(255,255,255,0.00)) 1;
                        margin-right: 30px;
                        i {
                            display: block;
                            font-style: normal;
                            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                            font-weight: Bold;
                            font-size: 18px;
                            color: #ffffff;
                        }
                        span {
                            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                            font-weight: Normal;
                            opacity: 0.6;
                            font-size: 10px;
                            color: #ffffff;
                        }
                    }
                    li:last-child {
                        margin-right: 0px;
                    }
                    .pending_task {
                        background: linear-gradient(to bottom,rgba(26,32,43,0.4) 60%,  rgba(65, 65, 98, 1) 100%);
                        background-image: url(../../assets/images/simulation-background1.png);
                        background-repeat: no-repeat;
                        background-size: 70px 50px;
                    }
                    .cross_roads {
                        background: #1a202b;
                        background-image: url(../../assets/images/simulation-background2.png);
                        background-repeat: no-repeat;
                        background-size: 70px 50px;
                    }
                    .speed_way {
                        background: #1a202b;
                        background-image: url(../../assets/images/simulation-background3.png);
                        background-repeat: no-repeat;
                        background-size: 70px 50px;
                    }
                    .high_way {
                        background: #1a202b;
                        background-image: url(../../assets/images/simulation-background4.png);
                        background-repeat: no-repeat;
                        background-size: 70px 50px;
                    }
                }
            }
            .simulation_bottom {
                margin-top: 20px;
                .bottom_up {
                    display: flex;
                    margin-bottom: 20px;
                    .up_left {
                        display: flex;
                        .left_icon {
                            width: 70px;
                            height: 70px;
                            img {
                                width: 100%;
                            }
                        }
                        .left_detail {
                            margin-left: 0px;
                            .left_content {
                                display: block;
                                opacity: 0.6;
                                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                                font-weight: Normal;
                                font-size: 12px;
                                color: #ffffff;
                                margin-bottom: 8px;
                            }
                            .left_total {
                                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                                font-weight: Bold;
                                font-size: 18px;
                                color: #ffffff;
                            }
                        } 
                    }
                    .up_right {
                        display: flex;
                        margin-left: 70px;
                        .right_icon {
                            width: 70px;
                            height: 70px;
                            img {
                                width: 100%;
                            }
                        }
                        .right_detail {
                            margin-left: 0px;
                            .right_content {
                                display: block;
                                opacity: 0.6;
                                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                                font-weight: Normal;
                                font-size: 12px;
                                color: #ffffff;
                                margin-bottom: 8px;
                            }
                            .right_total {
                                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                                font-weight: Bold;
                                font-size: 18px;
                                color: #ffffff;
                                margin-right: 5px;
                            }
                            .unit {
                                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                                font-weight: Bold;
                                font-size: 14px;
                                color: #ffffff;
                            }
                        }
                    }
                }
                .bottom_down {
                    display: flex;
                    .down_left {
                        display: flex;
                        .left_icon {
                            width: 70px;
                            height: 70px;
                            img {
                                width: 100%;
                            }
                        }
                        .left_detail {
                            margin-left: 0px;
                            .left_content {
                                display: block;
                                opacity: 0.6;
                                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                                font-weight: Normal;
                                font-size: 12px;
                                color: #ffffff;
                                margin-bottom: 8px;
                            }
                            .left_total {
                                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                                font-weight: Bold;
                                font-size: 18px;
                                color: #ffffff;
                                margin-right: 5px;
                            }
                            .unit {
                                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                                font-weight: Bold;
                                font-size: 14px;
                                color: #ffffff;
                            }
                        } 
                    }
                    .down_right {
                        display: flex;
                        margin-left: 70px;
                        .right_icon {
                            width: 70px;
                            height: 70px;
                            img {
                                width: 100%;
                            }
                        }
                        .right_detail {
                            margin-left: 0px;
                            .right_content {
                                display: block;
                                opacity: 0.6;
                                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                                font-weight: Normal;
                                font-size: 12px;
                                color: #ffffff;
                                margin-bottom: 8px;
                            }
                            .right_total {
                                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                                font-weight: Bold;
                                font-size: 18px;
                                color: #ffffff;
                                 margin-right: 5px;
                            }
                            .unit {
                                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                                font-weight: Bold;
                                font-size: 14px;
                                color: #ffffff;
                            }
                        }
                    }
                }
            }
        }
        .simulation_module:hover {
            .simulation_mask {
                width: 480px;
                height: 390px;
                position: absolute;
                bottom: -60px;
                right: 0px;
                background: linear-gradient(90deg, rgba(40,43,52,0.50), rgba(40,43,52,0));
                z-index: -1;
            }
            .simulationDropDownItem {
                position: absolute;
                right: 50px;
                bottom: 275px;
                display: block;
            }
        }
    }
}
</style>